import classNames from 'classnames';
import { useNavigate } from 'react-router-dom';
import { Import } from '../record/Import';
import { Export } from '../record/Export';
import $style from './style.module.scss';
import Menu1 from '@/assets/images/01.png';
import Menu2 from '@/assets/images/02.png';
import Menu3 from '@/assets/images/03.png';
import Menu4 from '@/assets/images/04.png';
import Menu5 from '@/assets/images/05.png';
import Menu6 from '@/assets/images/06.png';
import Menu7 from '@/assets/images/07.png';
import Menu8 from '@/assets/images/08.png';

import Right from '@/assets/images/right.png';
import Left from '@/assets/images/left.png';

import Down from '@/assets/images/down.png';
import Splash from '@/assets/images/splash.png';

export default function Dashboard() {
  const navigate = useNavigate();

  // async function handleRequest() {
  //   console.log('stat');
  //   const ids = new Uint32Array(1);
  //   window.crypto.getRandomValues(ids);
  //   const id = ids[0];
  //   // await download(
  //   //   'http://192.168.21.133:7678/dataPacket/transfer/download/63',
  //   //   '/Users/emesh/Library/Application Support/fill-turbo/download/整改评估模板.docx',
  //   //   (progress, total) => console.log(`Downloaded ${progress} of ${total} bytes`),
  //   // );

  //   const res = await invoke('plugin:upload|download', {
  //     id,
  //     url: 'http://192.168.21.133:7678/dataPacket/transfer/download/63',
  //     filePath: '/Users/emesh/Library/Application Support/fill-turbo/download/整改评估模板.docx',
  //     headers: {},
  //   });

  //   console.log(res);
  // }

  // useEffect(() => {
  //   handleRequest();
  // }, []);

  return (
    <div className={$style.dashboard}>
      <div>
        <div className={$style.container}>
          <div className={$style.sectionRow}>
            <Import>
              <div className={$style.sectionItem}>
                <img src={Menu1} />
                <div className={$style.sectionTitle}>导入</div>
              </div>
            </Import>
            <div className={$style.sectionArrow}>
              <img className="arrow" src={Right} />
            </div>
            <div className={$style.sectionItem} onClick={() => navigate('/opinion')}>
              <img src={Menu2} />
              <div className={$style.sectionTitle}>反馈意见</div>
            </div>
            <div className={$style.sectionArrow}>
              <img className="arrow" src={Right} />
            </div>
            <div className={$style.sectionItem} onClick={() => navigate('/meeting')}>
              <img src={Menu8} />
              <div className={$style.sectionTitle}>研究整改工作</div>
            </div>

            <div className={$style.sectionArrow}>
              <img className="arrow" src={Right} />
            </div>
            <div className={$style.sectionItem} onClick={() => navigate('/programme')}>
              <img src={Menu3} />
              <div className={$style.sectionTitle}>整改方案</div>
            </div>

          </div>

          <div className={classNames($style.sectionRow, $style.sectionReverse)}>
            <div className={$style.sectionArrowDown}>
              <img className="arrow" src={Down} />
            </div>
          </div>

          <div className={$style.sectionRow}>
            <Export>
              <div className={$style.sectionItem} onClick={() => navigate('/')}>
                <img src={Menu5} />
                <div className={$style.sectionTitle}>导出</div>
              </div>
            </Export>
            <div className={$style.sectionArrow}>
              <img className="arrow" src={Left} />
            </div>
            <div className={$style.sectionItem} onClick={() => navigate('/rectification')}>
              <img src={Menu7} />
              <div className={$style.sectionTitle}>整改公开</div>
            </div>
            <div className={$style.sectionArrow}>
              <img className="arrow" src={Left} />
            </div>

            <div className={$style.sectionItem} onClick={() => navigate('/report')}>
              <img src={Menu6} />
              <div className={$style.sectionTitle}>整改报告</div>
            </div>
            <div className={$style.sectionArrow}>
              <img className="arrow" src={Left} />
            </div>
            <div className={$style.sectionItem} onClick={() => navigate('/book')}>
              <img src={Menu4} />
              <div className={$style.sectionTitle}>整改台账</div>
            </div>
          </div>
        </div>

        <img className={$style.splash} src={Splash} />
      </div>
    </div>
  );
}
